﻿
@using HyperCrunch.Druid.Mobile
@using DotNetNuke.Entities.Modules
@{
    SiteModel model = (SiteModel)Model; // Expect to see a red squigly for Model in Visual Studio
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>@model.AppContext.PortalSettings.PortalName</title>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script></head>
    <script type="text/javascript" src="@(model.Script)"></script>
	<link rel="stylesheet" href="@(model.Stylesheet)" />
    @model.HelperScript
<body>
    <div data-role="page" id="Main" data-theme="b">                                                            
        <div data-role="header" data-theme="a">                                
            <h1>@model.AppContext.PortalSettings.PortalName</h1>
            @if (model.AppContext.Context.Request.IsAuthenticated)
            {
                <a href="@model.RouteUrl("/Logout")" data-icon="gear" data-role="button" data-inline="true" class="ui-btn-right">Logout</a>
            }
            else
            {
                <a href="#Login" data-icon="gear" data-role="button" data-inline="true" class="ui-btn-right">Login</a>
            }
        </div>
        <div data-role="content">                                                      
            <img src="@model.LogoUrl" style="height:50px" />
            @*                    
                Enumerate the list of divider labels and modules and render a
                nice jQuery Mobile formatted list.                    
            *@     

            <div data-role="collapsible-set">
                @foreach (string key in model.Content.Keys)
                {
	                <div data-role="collapsible" data-theme="b">
                        <h3>@key</h3>   
                        <ul data-role="listview" data-inset="true" data-theme="d">
                            @{
                                  var counter = 0;
                                  foreach (ModuleInfo moduleInfo in model.Content[key])
                                  {
                                      if (moduleInfo.DesktopModule.SupportedFeatures == (int)RenderableType.Mobile)
                                      {
                                            <li><a href="@model.AppUrl(moduleInfo)" rel="external">@moduleInfo.ModuleTitle</a></li>
                                      }
                                      else
                                      {     
                                            <li><a href="@(model.RouteUrl(moduleInfo))#Module" rel="external">@moduleInfo.ModuleTitle</a></li>                                        
                                      }
                                  }
                              }                            
                        </ul>
                    </div>
                }
            </div>
        </div>
    </div>

    @* Module page *@
    <div data-role="page" id="Module" data-theme="b">
        <div data-role="header" data-theme="a">                                  
            @if (!String.IsNullOrEmpty(model.ReturnUrl))
            {
                <a href="@model.ReturnUrl" data-icon="back" data-direction="reverse" class="ui-btn-left jqm-back" rel="external">Back</a>
            }
            <h1>@model.AppContext.PortalSettings.PortalName</h1>
        </div>
        <div data-role="content">                                                       
        </div>    
    </div>

    @* Login page *@
    <div data-role="page" id="Login" data-theme="b">                                                   
        <div data-role="header" data-theme="a">                                  
            <a href="#main" data-icon="back" data-role="button" data-inline="true">Back</a>
            <h1>@model.AppContext.PortalSettings.PortalName Login</h1>
        </div>
        <div data-role="content">                                                       
            <div style="width:200px;margin:20px auto;">
	            <p><input type="text" value="" id="username" placeholder="Username:" name="username" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" /></p>
	            <p><input type="password" value="" placeholder="Password" id="password" name="password" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" /></p>
                <input type="hidden" value="@model.PageUrl" id="returnUrl" name="returnUrl" />
                <input type="button" id="LoginButton" data-url="@model.RouteUrl("/Login")" value="Login" data-theme="b" />
            </div>
        </div>
    </div>

</body>
</html>
